<template>
	<div>
		<Echart :options="options" id="bar_a" ref="bar_a" width="100%" height="170px"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						legend: {
							show: false
						},
						// 工具提示
						tooltip: {
							// 触发类型  经过轴触发axis  经过轴触发item
							trigger: 'item',
							// 轴触发提示才有效
							axisPointer: {
								// 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果       
								type: 'shadow'
							},
							//formatter: '{a0}{c0}天',
							// formatter: function (params) {
							//             return (
							//                 dataX[params[0].dataIndex] +
							//                 '<br/>满意度：' +
							//                 dataY[params[0].dataIndex] +
							//                 '%' +
							//                 '<br> 处理量：' +
							//                 dataY1[params[0].dataIndex] +
							//                 ''
							//             );
							//         },
						},
						// 图表边界控制
						grid: {
							// 距离 上右下左 的距离
							// left: '0',
							// right: '0',
							// bottom: '0',
							// top: '10px',
							x: 0,
							y: 20,
							x2: 0,
							y2:10,
							// 大小是否包含文本【类似于boxsizing】
							containLabel: true,
							//显示边框
							show: false,
							//边框颜色
							borderColor: 'rgba(0, 240, 255, 0.3)'
						},

						xAxis: [{
							// 使用类目，必须有data属性
							type: 'category',
							// 使用 data 中的数据设为刻度文字
							data: newData.scale,
							// 刻度设置
							axisTick: {
								// true意思：图形在刻度中间
								// false意思：图形在刻度之间
								alignWithLabel: false,
								show: false
							},
							//文字
							axisLabel: {
								color: '#4c9bfd',
								interval: 0,
								rotate: 0,
								fontSize: 10,
							},

						}],
						// 控制y轴
						yAxis: [{
							// 使用数据的值设为刻度文字
							type: 'value',
							axisTick: {
								// true意思：图形在刻度中间
								// false意思：图形在刻度之间
								alignWithLabel: false,
								show: false
							},
							//文字
							axisLabel: {
								color: '#4c9bfd',
								formatter: '{value}次', //右侧Y轴文字显示
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(0, 240, 255, 0.3)'
								}
							},
						}],
						series: {
							type: 'bar',
							showBackground: false,
							barWidth: '10',
							label: {
								normal: {
									show: true,
									position: 'top',
									formatter: '{c}',
									textStyle: {
										fontSize: 10,
										color: '#ffffff'
									}
								},
							},
							name: '平均清理次数',
							data: newData.seriesData,
							datasetIndex: 1
						},
					};
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>